 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">修改角色</div>
      </div>
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content-con">
        <Form-item prop="id">
          <Row>
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  角色ID
                </i-col>
                <i-col span="16">
                  <i-input v-model="formValidate.id" size="large" readonly></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
        </Form-item>
        <Form-item prop="title">
          <Row>
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  角色名称
                </i-col>
                <i-col span="16">
                  <i-input v-model="formValidate.title" size="large" placeholder="请输入名称"></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
        </Form-item>
        <!-- <div class="form-item">
          <Row style="padding-top: 15px;"
          v-for="(role,index) in roleData"
          :key='role.id'>
            <i-col span="10">
              <Row>
                <i-col span="8" class="ban-left">{{role.title}}</i-col>
                <i-col span="16">
                  <i-input :value.sync="role.label" readonly size="large"></i-input>
                </i-col>
              </Row>
            </i-col>
          </Row>
        </div> -->
        <Form-item class="ban-btn">
          <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </i-form>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'role-edit',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       formValidate:{
         id: '8',
         title: '系统管理'
       },
       ruleValidate:{
         title:[
           {
             required: true,
             message: '请输入名称',
             trigger: 'blur'
           }
         ]
        }
       // value: '',
       // roleData: [
       //   {
       //     title: '角色ID',
       //     label: '8'
       //   },
       //   {
       //     title: '角色名称',
       //     label: '系统管理'
       //   }
       // ]
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'role_management'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">
   
  .ivu-input{
    border-radius: 0 2px 2px 0;
  }
 </style>
